/**
 * @class ETabPage 标签页
 */
let ETabPage = function (selector, options) {
    let util = EUtil;

    let the = this;
    let element = $(selector);
    if (element.length > 0) {
        return;
    }

    /**
     * 默认设置
     * @type {{}}
     */
    let defaultOptions = {
        tabNameLength: 10,
        toLeft: $('.to-left'),
        toRight: $('.to-right'),
        tool: {
            refreshPage: $('.refresh-page'),
            closeOther: $('.close-other'),
            closeAll: $('.close-all')
        },
        containerScroll: $('.container-scroll'),
        conTabs: $('.con-tabs'),
        pageContainer: $('.page-container'),
        tabPage: $('.tab-page')
    };

    /**
     * 私有方法
     */
    let Plugin = {
        index: 1,
        /**
         * Construct
         */
        construct: function (options) {
            // 初始化
            Plugin.init(options);
            // 绑定事件
            Plugin.build();
            return the;
        },
        build: function () {
            // 点击向左按钮
            defaultOptions.toLeft.click(function () {
                let marginLeft = Number(defaultOptions.conTabs.css('margin-left').replace('px', ''));
                if (marginLeft !== 0) {
                    let tabsScrollWidth = Plugin.calcWidth(defaultOptions.containerScroll); // tab 工具条可视宽度
                    let targetMarginLeft = marginLeft + (tabsScrollWidth * 0.8);
                    if (targetMarginLeft > 0) {
                        targetMarginLeft = 0;
                    }
                    defaultOptions.conTabs.animate({marginLeft: targetMarginLeft + 'px'}, 'fast');
                }
            });
            // 点击向右按钮
            defaultOptions.toRight.click(function () {
                let marginLeft = Number(defaultOptions.conTabs.css('margin-left').replace('px', ''));
                let tabsScrollWidth = Plugin.calcWidth(defaultOptions.containerScroll); // tab 工具条可视宽度
                let conTabsWidth = Plugin.calcWidth(defaultOptions.conTabs.children()); // tab 总宽
                let targetMarginLeft = marginLeft - (tabsScrollWidth * 0.8);

                if (Math.abs(targetMarginLeft) > (conTabsWidth - tabsScrollWidth)) {
                    targetMarginLeft = (conTabsWidth - tabsScrollWidth) * -1;
                }
                if (targetMarginLeft > 0) {
                    targetMarginLeft = 0;
                }
                defaultOptions.conTabs.animate({marginLeft: targetMarginLeft + 'px'}, 'fast');
            });
            // 刷新按钮
            defaultOptions.tool.refreshPage.click(function () {
                Plugin.refreshActivePage();
            });
            // 关闭全部 (只关闭允许关闭的tab)
            defaultOptions.tool.closeAll.click(function () {
                let retainTab = null;
                defaultOptions.conTabs.children().each(function () {
                    let $this = $(this);
                    let $tabClose = $this.find('.tab-close');
                    if ($tabClose != null && $tabClose.length > 0) {
                        Plugin.closeTab($this);
                    } else {
                        retainTab = $this;
                    }
                });
                if (retainTab != null) {
                    Plugin.setTabState(retainTab.find('a.btn'), true);
                }
                Plugin.toActiveTab();
            });
            // 关闭其他
            defaultOptions.tool.closeOther.click(function () {
                defaultOptions.conTabs.children().each(function () {
                    let $this = $(this);
                    let $tabClose = $this.find('.tab-close');
                    if ($tabClose != null && $tabClose.length > 0 && !$this.hasClass('active')) {
                        Plugin.closeTab($this);
                    }
                });
                Plugin.toActiveTab();
            });
        },
        /**
         * 初始化
         */
        init: function () {
            Plugin.bindClickTab(); // 绑定点击tab事件
        },

        /**
         * 关闭tab事件
         */
        bindClose: function () {
            defaultOptions.conTabs.find('.tab-close').unbind('click').click(function (e) {
                e.preventDefault();
                Plugin.closeTab($(this).parents('li'));
            });
        },
        /**
         * 点击tab事件
         */
        bindClickTab: function () {
            let alreadyClickedTimeout;
            defaultOptions.conTabs.on('click', 'a.btn', function () {
                let $tab = $(this);
                if ($tab.data('alreadyClicked')) {
                    // 双击
                    console.log('dblclick');
                    $tab.data('alreadyClicked', false); // 重置点击状态
                    clearTimeout(alreadyClickedTimeout); // 阻止单击事件执行

                    if ($tab.parent().hasClass('active')) { // 如果用户双击已激活tab,刷新页面
                        Plugin.refreshActivePage();
                    }
                } else {
                    $tab.data('alreadyClicked', true);
                    alreadyClickedTimeout = setTimeout(function () {
                        $tab.data('alreadyClicked', false); // 重置点击状态
                        // 单击
                        console.log('click');
                        if (!$tab.parent().hasClass('active')) {
                            $tab.data('alreadyClicked', false); // 重置点击状态
                            defaultOptions.conTabs.children('.active').removeClass('active');
                            defaultOptions.pageContainer.children('.active').removeClass('active');
                            Plugin.setTabState($tab, true);
                            Plugin.toActiveTab();
                            Plugin.customCallback();
                        }
                    }, 200); // 点击事件间隔300毫秒以内会被认为是双击
                }
                return false;
            });
        },

        /**
         * 刷新当前激活标签页
         */
        refreshActivePage: function (url) {
            if (EUtil.isBlank(url)) {
                url = defaultOptions.conTabs.children('.active').find('a.btn').attr('data-url');
            }
            let $iframe = defaultOptions.pageContainer.find('iframe.page-frame[src="' + url + '"]');
            if ($iframe.length) {
                $iframe.attr('src', url);
            }
        },
        /**
         * 显示指定tab内容
         *
         * @param $tab {jquery element} (a.btn)
         * @param isShow {boolean} 是否显示
         */
        setTabState: function ($tab, isShow) {
            let url = $tab.attr('data-url');
            if (isShow) {
                defaultOptions.pageContainer.find('iframe.page-frame[src="' + url + '"]').addClass('active');
                $tab.parent().addClass('active');
            } else {
                defaultOptions.pageContainer.find('iframe.page-frame[src="' + url + '"]').removeClass('active');
                $tab.parent().removeClass('active');
            }
        },
        /**
         * 关闭标签页
         * @param $tab {jquery element} 标签页 (li)
         */
        closeTab: function ($tab) {
            let url = $tab.find('a').data('url');
            // 来源页面pathname，用于关闭标签页后返回来源页面
            let sourcePagePathname =  $tab.find('a').data('source');
            let nextTab;
            if ($tab.hasClass('active')) { // 如果关闭的是当前激活tab,自动切换到前/后的标签
                if(EUtil.isNotBlank(sourcePagePathname)){
                    let $sourceTabA = defaultOptions.conTabs.find('[data-url="' + sourcePagePathname + '"]');
                    if($sourceTabA.length){
                        nextTab = $sourceTabA.parent();
                    }
                }
                if(nextTab == null){
                    nextTab = $tab.prev();
                    if (nextTab == null || nextTab.length === 0) {
                        nextTab = $tab.next();
                    }
                }
            }
            $tab.remove();
            defaultOptions.pageContainer.find('iframe.page-frame[src="' + url + '"]').remove();
            if (nextTab != null) {
                Plugin.setTabState(nextTab.find('a.btn'), true);
                Plugin.toActiveTab();
                Plugin.customCallback();
            }
        },
        /**
         * 关闭指定url页面
         * @param url {string} 页面url
         */
        closeTabByUrl: function (url) {
            let a = defaultOptions.conTabs.find('a.btn[data-url="' + url + '"]');
            if (a != null && a.length > 0) {
                Plugin.closeTab(a.parent());
            } else {
                console.warn('关闭页面[' + url + ']失败,url未在应用中打开');
            }
        },
        /**
         * 添加Tab页
         * @param name {string} 标签页名称
         * @param url {string} 地址
         * @param canClose {boolean} 是否可以关闭
         * @param sourcePagePathname {string} 来源页面pathname，用于关闭标签页后返回来源页面
         */
        addTab: function (name, url, canClose, sourcePagePathname) {
            if (util.isBlank(url)) return;
            if (Plugin.needOpen(url)) {
                Plugin.index++;
                name = name.trim();
                let _tab = '\
                    <li class="active">\
                        <a class="btn btn-default m-btn--icon tab" href="#" data-source="' + sourcePagePathname + '" data-url="' + url + '" title="' + name + '" data-target="iframe-' + Plugin.index + '" data-alreadyClicked="false">\
                            <span>' + Plugin.getTabName(name) + ((typeof canClose === 'undefined' || canClose) ? '<i class="tab-close la la-close"></i>' : '') + '</span>' +
                    '</a>' +
                    '</li>';
                let _iframe = '<iframe src="' + url + '" data-source="' + sourcePagePathname + '" frameborder="0" name="iframe-' + Plugin.index + '" class="page-frame active animation-fade"></iframe>';
                defaultOptions.conTabs.children('.active').removeClass('active');
                defaultOptions.pageContainer.children('.active').removeClass('active');
                defaultOptions.conTabs.append(_tab);
                defaultOptions.pageContainer.append(_iframe);
                defaultOptions.conTabs.width(Plugin.calcWidth(defaultOptions.conTabs.children()) + 30);
                Plugin.bindClose(); // 绑定点击关闭事件
            } else {
                Plugin.setTabState(defaultOptions.conTabs.find('.active').find('a.btn'), false);
                Plugin.setTabState(defaultOptions.conTabs.find('[data-url="' + url + '"]'), true);
                Plugin.customCallback();
            }
            Plugin.toActiveTab();
        },
        /**
         * 执行自定义回调
         */
        customCallback: function () {
            let iframe = defaultOptions.pageContainer.children('.active');
            if (iframe.length > 0) {
                if (typeof iframe[0].contentWindow.ETab !== 'undefined') {
                    // 检查是否需要刷新页面
                    if (util.isFunction(iframe[0].contentWindow.ETab.needRefresh) && iframe[0].contentWindow.ETab.needRefresh()) {
                        Plugin.refreshActivePage();
                    }
                    // 检查是否需要提交表单
                    if (util.isFunction(iframe[0].contentWindow.ETab.needSubmitForm) && iframe[0].contentWindow.ETab.needSubmitForm()) {
                        let $btn = $(iframe[0].contentDocument).find('.btn.btn-search');
                        if ($btn.length > 0) {
                            $btn.click();
                        }
                    }
                }
            }
        },
        /**
         * 跳转到当前激活
         */
        toActiveTab: function () {
            let $activeTab = defaultOptions.conTabs.find('.active');
            let activeWidth = Plugin.calcWidth($activeTab); // 当前激活tab宽度
            let prevAllWidth = Plugin.calcWidth($activeTab.prevAll()); // 当前激活tab前面tabs总宽
            let tabsScrollWidth = Plugin.calcWidth(defaultOptions.containerScroll); // tab 工具条可视宽度
            let conTabsWidth = Plugin.calcWidth(defaultOptions.conTabs.children()); // tab 总宽
            let marginLeft = Number(defaultOptions.conTabs.css('margin-left').replace('px', ''));
            if (conTabsWidth > tabsScrollWidth) {
                if (Math.abs(marginLeft)> prevAllWidth) { // 目标标签页隐藏在左侧
                    marginLeft = prevAllWidth * -1;
                } else if ((Math.abs(marginLeft) + tabsScrollWidth) < (prevAllWidth + activeWidth)) { // 目标标签页隐藏在右侧
                    marginLeft = (prevAllWidth + activeWidth - tabsScrollWidth) * -1;
                }
            } else {
                marginLeft = 0;
            }
            defaultOptions.conTabs.animate({marginLeft: marginLeft + 'px'}, 'fast');
        },
        /**
         * 计算总宽度
         * @param $tabs
         * @returns {number}
         */
        calcWidth: function ($tabs) {
            if ($tabs != null && $tabs.length > 0) {
                let width = 0;
                $($tabs).each(function () {
                    width += $(this).outerWidth(true);
                });
                return Math.ceil(width);
            }
            return 0;
        },
        /**
         * 获取标签页名称
         * @param name
         * @returns {string}
         */
        getTabName: function (name) {
            if (util.isNotBlank(name)) {
                return util.subStr(name, defaultOptions.tabNameLength);
            } else {
                return '新建标签页';
            }
        },
        /**
         * 检查url是否需要打开
         *
         * @param url 链接地址
         * @returns {boolean}
         */
        needOpen: function (url) {
            if (util.isNotBlank(url)) {
                let $tab = defaultOptions.conTabs.find('[data-url="' + url + '"]');
                return $tab.length === 0;
            }
            return false;
        },
    };

    //////////////////////////
    // **     开放方法    ** //
    //////////////////////////
    /**
     * 添加Tab页
     * @param name {string} 标签页名称
     * @param url {string} 页面url
     * @param canClose {boolean} 是否可以关闭
     * @param sourcePagePathname {string} 来源页面pathname，用于关闭标签页后返回来源页面
     */
    the.addTab = function (name, url, canClose, sourcePagePathname) {
        return Plugin.addTab(name, url, canClose, sourcePagePathname);
    };
    /**
     * 关闭指定url页面
     *
     * @param url {string} 页面url
     */
    the.closeTabByUrl = function (url) {
        return Plugin.closeTabByUrl(url);
    };
    /**
     * 刷新指定页面
     *
     * @param url {string} 页面url
     */
    the.refresh = function (url) {
        Plugin.refreshActivePage(url);
    };
    /**
     * 跳转到当前激活
     */
    the.toActiveTab = function(){
        Plugin.toActiveTab();
    };
    //== Construct plugin
    Plugin.construct.apply(the, [options]);

    return the;
};
/**
 * tab callback
 * @type {{needRefresh: (function(): boolean), needSubmitForm: (function(): boolean)}}
 */
window.ETab = {
    /**
     * 激活当前tab是否需要刷新当前页面
     *
     * @returns {boolean}
     */
    needRefresh: function () {
        return false;
    },
    /**
     * 激活当前tab是否需要提交查询表单
     *
     * @returns {boolean}
     */
    needSubmitForm: function () {
        return false;
    }
};